<template>
  <el-row :gutter="10">
    <el-col v-for="x in inputList" :key="x" :span="4">
      <el-input
          v-model="x.value"
          size="small"
          @dblclick="showCheck(x)"
      />
      <!--      <el-switch-->
      <!--          v-if="x.check === false"-->
      <!--          v-model="x.check"-->
      <!--          active-color="#51ea94"-->
      <!--          active-text="Y"-->
      <!--          inactive-color="#7a7474"-->
      <!--          inactive-text="N"-->
      <!--          inline-prompt-->
      <!--          size="small"-->
      <!--      />-->
      <el-checkbox v-if="x.check === false" v-model="x.check" size="small" @click="clearInput(x)"/>
    </el-col>
  </el-row>
</template>


<script setup>
import {onMounted, ref} from 'vue'

const props = defineProps({
  size: {
    type: Number,
    default: 6
  }
})

const _l = []
for (let i = 0; i < props.size; i++) {
  _l.push({value: '', check: false})
}
const inputList = ref(_l)

const showCheck = (x) => {
  x.check = false
  x.value = ''
}

const clearInput = (x) => {
  x.value = ''
}

onMounted(() => {
})
</script>

<style lang="scss" scoped>
.a111 {
  color: #7a7474;
}
</style>
